import React from 'react';
import { createPortal } from 'react-dom';

export interface FullScreenLoaderProps {
    message: string;
    /**
     * 是否为演示模式，在 Storybook 中使用
     * 演示模式下不会固定定位和遮挡整个屏幕
     */
    demoMode?: boolean;
}

export const FullScreenLoader: React.FC<FullScreenLoaderProps> = ({ message, demoMode = false }) => {
    // 创建一个 ref 来跟踪元素
    const loaderRef = React.useRef<HTMLDivElement | null>(null);

    React.useEffect(() => {
        if (!demoMode) {
            // 锁定滚动
            const originalStyle = window.getComputedStyle(document.body).overflow;
            document.body.style.overflow = 'hidden';
            
            // 确保加载器始终在最顶层
            if (loaderRef.current) {
                loaderRef.current.style.zIndex = '9999';
            }
            
            return () => {
                document.body.style.overflow = originalStyle;
            };
        }
    }, [demoMode]);

    // 根据是否为演示模式选择不同的样式
    const containerClassName = demoMode
        ? "relative w-full h-64 flex items-center justify-center bg-black/50 backdrop-blur-sm rounded-lg"
        : "fixed inset-0 z-[9999] flex items-center justify-center bg-black/50 backdrop-blur-sm";

    const loaderContent = (
        <div className={containerClassName} ref={loaderRef}>
            <div className="flex flex-col items-center space-y-4 rounded-lg bg-white p-6 shadow-lg">
                <div className="h-8 w-8 animate-spin rounded-full border-4 border-blue-500 border-t-transparent"></div>
                <p className="text-gray-700">{message}</p>
            </div>
        </div>
    );

    // 如果不是演示模式，使用 Portal 将加载器渲染到 body 的最后面
    // 这样可以确保它不会被其他元素遮挡
    if (!demoMode && typeof document !== 'undefined') {
        return createPortal(loaderContent, document.body);
    }

    return loaderContent;
};
